<template>
    <div class="category">
        <!-- <h3>商品页的儿子{{ cateid }}{{ catetitle }}</h3> -->
        <!-- 搜索栏 -->
        <div class="top">
            <van-search class="search" v-model="value" shape="round" placeholder="请输入搜索关键词" @search="onSearch" />
            <van-icon class="search-ico" v-if="chan" name="qr" @click="change" />
            <van-icon class="search-ico" v-else name="qr-invalid" @click="change" />
        </div>
        <!--切换栏  -->
        <ul class="uls">
            <li :class="{ active: currIndex == 1 }" @click.stop="currIndex = 1">{{ catetitle }}</li>
            <li :class="[{ active: currIndex == 2 }, { btred: price == 3 }, { tpred: price == 2 }]" @click="prices" @click.stop="currIndex = 2">价格</li>
            <li :class="[{ active: currIndex == 3 }, { btred2: sale == 3 }, { tpred2: sale == 2 }]" @click="sales" @click.stop="currIndex = 3">销量</li>
            <li :class="{ active: currIndex == 4 }" @click="news" @click.stop="currIndex = 4">新品</li>
        </ul>

        <!-- 内容栏 -->
        <div class="item-box" v-if="cateson.length > 0">
            <product-list :product="cateson" v-if="chan"></product-list>
            <tow-view :article="cateson" v-else></tow-view>
        </div>
        <!-- 没有数据,显示推荐 -->
        <div v-else class="recom">
            <img src="../../assets/image/noGood.png" alt="" />
            <recom-mended></recom-mended>
        </div>
    </div>
</template>

<script>
import ProductList from "../ProductList.vue"; //商品块
import TowView from "./TowView.vue"; //商品条
import RecomMended from "../RecomMended.vue"; // 没有内容,商品推荐
export default {
    components: { ProductList, RecomMended, TowView },
    data() {
        return {
            cateson: [],
            value: "",
            currIndex: 1, // 是否高亮文字
            price: 1, // 判断价格的升/ 降序
            sale: 1, // 判断销量的升/ 降序
            chan: true, //商品是条 还是方块
        };
    },
    props: {
        cateid: {
            type: String,
            default: "",
        },
        catetitle: {
            type: String,
            default: "",
        },
    },
    methods: {
        // 初始化数据
        getCateList() {
            // http://47.115.51.185/api/products?page=1&limit=8&keyword=&sid=31&news=1&priceOrder=asc&salesOrder=
            // this.axios.get(`http://47.115.51.185/api/products?id=${this.cateid}&title=${this.catetitle}`).then((re) => {

            /* 
            page: 1  页码
            limit: 8  每页显示条数
            keyword:  搜索关键字 如果为分类列表可以为空
            sid: 31  分类ID
            news: 0  是否新品
            priceOrder:  asc 升序 desc 降序排列  价格
            salesOrder:  asc 升序 desc 降序排列  销量    
            */
            this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=`).then((re) => {
                this.cateson = re.slice(0, 10);
                // console.log(re);
            });
        },
        // 价格排序
        prices() {
            // console.log("价格");
            this.sale = 1;
            this.price++;
            if (this.price >= 4) {
                this.price = 1;
            }

            if (this.price == 1) {
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    // console.log(re);
                });
            } else if (this.price == 3) {
                //价格升序
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=desc&salesOrder=`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    console.log("价格降");
                    // console.log(re);
                });
            } else {
                //价格降序
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=asc&salesOrder=`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    console.log("价格升");
                    // console.log(re);
                });
            }
        },
        // 销量排序
        sales() {
            this.price = 1;
            this.sale++;
            if (this.sale >= 4) {
                this.sale = 1;
            }
            if (this.price == 1) {
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    // console.log(re);
                });
            } else if (this.price == 3) {
                //价格升序
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=desc`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    console.log("销量降");
                    // console.log(re);
                });
            } else {
                //价格降序
                this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=asc`).then((re) => {
                    this.cateson = re.slice(0, 10);
                    console.log("销量升");
                    // console.log(re);
                });
            }
        },
        // 最新新品
        news() {
            this.price = 1;
            this.sale = 1;
            this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.cateid}&news=0&priceOrder=&salesOrder=`).then((re) => {
                this.cateson = re.slice(0, 10);
                console.log("新品");
            });
        },
        // 改变商品的形状
        change() {
            this.chan = !this.chan;
        },

        // 搜索商品
        onSearch() {
            // console.log(123);
            if (this.value == "" || this.value.length < 1) return;
            this.axios.get(`/products?page=1&limit=8&keyword=&sid=${this.value}&news=0&priceOrder=&salesOrder=`).then((re) => {
                this.cateson = re.slice(0, 10);
                // console.log(re);
            });
        },
    },
    created() {
        this.getCateList();
    },
};
</script>

<style lang="scss" scoped>
.category {
    .top {
        // height: 43px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #e93323;
        .search {
            height: 43px;
            width: 320px;
            background: #e93323;
        }
        .search-ico {
            color: #fff;
        }
    }
    // tab 切换
    .uls {
        height: 43px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        // margin-bottom: 10px;
        li {
            // flex: 1;
            position: relative;
            &.active {
                color: red;
            }
            &:nth-child(2)::before {
                content: "";
                width: 0;
                height: 0;
                border-top: 4px solid grey;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 50%;
            }
            &:nth-child(2).btred::before {
                content: "";
                width: 0;
                height: 0;
                border-top: 4px solid red;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 50%;
            }
            &:nth-child(2)::after {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 4px solid grey;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 15%;
            }
            &:nth-child(2).tpred::after {
                content: "";
                content: "";
                width: 0;
                height: 0;
                border-bottom: 4px solid red;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 15%;
            }

            // 销量
            &:nth-child(3)::before {
                content: "";
                width: 0;
                height: 0;
                border-top: 4px solid grey;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 50%;
            }
            &:nth-child(3).btred2::before {
                content: "";
                width: 0;
                height: 0;
                border-top: 4px solid red;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 50%;
            }
            &:nth-child(3)::after {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 4px solid grey;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 15%;
            }
            &:nth-child(3).tpred2::after {
                content: "";
                content: "";
                width: 0;
                height: 0;
                border-bottom: 4px solid red;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                position: absolute;
                right: -50%;
                top: 15%;
            }
        }
    }
    .item-box {
        width: 100vw;
        height: 100%;
        background: #f5f5f5;
    }

    // 没有数据的样式
    .recom {
        img {
            width: 207px;
            height: 168px;
            margin: 0 auto;
        }
    }
}
</style>
